---
title: 'O que faz `* { box-sizing: border-box; }`?'
subtitle: Quais as vantagens?
---

`* { box-sizing: border-box; }` faz com que cada elemento na página use a abordagem `box: border-box` para calcular os elementos `height` e `width`.

## Qual é a diferença?

Por padrão, os elementos têm `box-sizing: content-box` aplicado, e apenas o tamanho do conteúdo está sendo contabilizado se um elemento tem `height` e `width` especificados. `box-sizing: border-box` altera como a `width` e `height` dos elementos estão sendo calculadas, a `border` e o `padding` também são incluídos no cálculo. O `height` de um elemento é agora calculado pelo conteúdo `height` + `padding` vertical + `border` horizontal. A `width` de um elemento é agora calculada pela `width` do conteúdo + `padding` horizontal + largura da horizontal `border`.

A tabela a seguir indica se a propriedade é incluída ou não no cálculo da altura e largura do elemento quando ele tem o respectivo `box-sizing`:

| Propriedade | `box-sizing: content-box` (padrão) | `box-sizing: border-box` |
| ----------- | ---------------------------------- | ------------------------ |
| conteúdo    | Sim                                | Sim                      |
| `padding`   | Não                                | Sim                      |
| `border`    | Não                                | Sim                      |
| `margin`    | Não                                | Não                      |

## Vantagens

Levar em consideração `paddings` e `border`s como parte do modelo de caixa é mais coerente com a forma como os designers imaginam o conteúdo em grades. Essa é uma maneira mais intuitiva de pensar em caixas e, portanto, muitos frameworks CSS definem globalmente `* { box-sizing: border-box; }` para que todos os elementos usem esse modelo de caixa por padrão.

## Referências

- [Box Sizing CSS-Tricks](https://css-tricks.com/box-sizing/)
